<template>
	<view class="page-wrap" :data-theme="theme" :class="theme" :style="globalColor.style">
		<HeadCustom></HeadCustom>
		<u-checkbox-group v-model="fromData.expectMeetList" placement="column" @change="checkboxChange">
			<view class="card">
				<view class="hd fboxRow Ycenter"><view class="flex1 font28 color-969699">请选择期望结识的行业人脉</view></view>
				<view class="bd fboxWrap">
					<view class="item" v-for="(item, index) in list" :key="index" @click="itemTap(item)">
						<view class="radio"><u-checkbox :name="item.industryName"></u-checkbox></view>
						<image class="pic" :src="item.industryImage" mode="aspectFill"></image>
						<view class="tit font-ell1 font24 color-0F0400">{{ item.industryName }}</view>
					</view>
				</view>
			</view>
		</u-checkbox-group>
		<BottomBtn title="保存" @btnClick="verifyTap"></BottomBtn>
	</view>
</template>

<script>
import BottomBtn from '@/components/bottom-btn/index.vue';
import { recommendIndustryList } from '@/api/mine.js';
import { editMixinsMine } from './edit.mixins.mine.js';
export default {
	mixins: [editMixinsMine],
	components: { BottomBtn },
	data() {
		return {
			theme: getApp().globalData.appTheme,
			globalColor: getApp().globalData.globalColor,
			list: [],
			fromData: {
				expectMeetList: []
			}
		};
	},
	onLoad() {
		this.getList();
	},
	methods: {
		getList() {
			recommendIndustryList({
				current: 1,
				size: 500
			}).then(res => {
				this.list = res.data.list;
			});
		},
		itemTap(item) {
			if (this.fromData.expectMeetList.length) {
				const index = this.fromData.expectMeetList.indexOf(item.industryName);
				if (index != -1) {
					this.fromData.expectMeetList.splice(index, 1);
				} else {
					this.fromData.expectMeetList.push(item.industryName);
				}
			} else {
				this.fromData.expectMeetList.push(item.industryName);
			}
		},
		checkboxChange(e) {
			console.log(e);
			// this.fromData. = item.key
		},
		verifyTap() {
			const { expectMeetList } = this.fromData;
			this.putInfo();
			// if(expectMeetList.length){
			// 	this.putInfo()
			// }else{
			// 	uni.showToast({
			// 		icon: 'none',
			// 		title: '请选择期望结识'
			// 	})
			// }
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	background: #f7f8ff;
}
.page-wrap {
}
.card {
	padding: 0 0 4rpx 40rpx;
}
.card .hd {
	padding-right: 40rpx;
	height: 92rpx;
}
// .card .bd{margin-right: -16rpx;}
.card .item {
	position: relative;
	margin: 0 16rpx 16rpx 0;
	width: 214rpx;
	background: #ffffff;
	border: 2px solid #f7f8ff;
	border-radius: 12rpx;
	overflow: hidden;
}
.card .pic {
	position: relative;
	z-index: 1;
	width: 214rpx;
	height: 214rpx;
	background: #969699;
	overflow: hidden;
}
.card .tit {
	padding: 0 20rpx;
	height: 86rpx;
	line-height: 86rpx;
	overflow: hidden;
	text-align: center;
}
.card .radio {
	position: absolute;
	right: 6rpx;
	top: 18rpx;
	z-index: 3;
}
</style>
